<template>

  <section class="screen-vue">
    <div class="header">
      <div class="search">
        <div class="search_left" @click="back()"></div>
        <div class="search_center">
          <div class="searchs">
            <div class="s1"></div>
            <input type="text" :value='kwords'>
          </div>
        </div>
        <div class="search_right" @click="aa()">筛选</div>
      </div>
      <div class="list">
        <ul>
          <li @click="dd()" class="active">综合</li>
          <li @click="ff('sales')">销量</li>
        </ul>
      </div>
    </div>
    <div class="content">
      <router-link to="/ProductDetails">
        <div class="goods" v-for="(item,index) in arr" :key="index">
          <div class="goods_left"><img :src="item.image" alt=""></div>
          <div class="goods_right">
            <div class="goods_title">{{ item.title }}</div>
            <div class="goods_price">￥{{ item.price }}</div>
            <div class="goods_num">销量<span>{{ item.sales }}</span>件</div>
          </div>
        </div>
      </router-link>
    </div>
    <div class="screen" v-if="show">
      <div class="ss1">
        <div class="fen">
          <div class="fen_title">
            <span>分类</span>
            <span id="ClassifiedTitle">{{ClassifiedTitle}}</span><img src="../assets/main_img/screen_up.png" alt="" @click="bb()">
          </div>
          <div class="fen_con" v-if="ww">
            <ul>
              <li v-for="(item,index) in title" @click="Title(index)" :class="index===Show?'as':'Show'">{{item.title}}</li>
            </ul>
          </div>
        </div>
        <div class="price">
          <div class="price_title">
            <span>价格区间</span>
            <div class="price_r">
              <span v-if="pp"><span>最低价</span><span class="ll">-</span><span>最低价</span></span>
              <span class="active">{{ClassifiedPrice}}</span>
              <img src="../assets/main_img/screen_up.png" alt="" @click="cc()">
            </div>
          </div>
          <div class="price_con" v-if="qq"> 
            <ul>
              <li v-for="(item,index) in data" @click="price(index)" :class="index===follow?'as':'Show'">{{item.price}}</li>
            </ul>
          </div>
        </div>
        <div class="pin" v-for="(item,index) in aAttrs">
          <div class="pin_title">
            <span>{{item.title}}</span>
            <img src="../assets/main_img/screen_up.png" alt="">
          </div>
          <div class="pin_con">
            <ul>
              <li v-for="(data,index) in item.param" @click="pin(index)" :class="index===Pin?'as':'Show'">{{data.title}}</li>
            </ul>
          </div>
        </div>
      </div>
      <div class="ss2">
        <div class="but1">共<span>{{total}}</span>件</div>
        <div class="but2">全部重选</div>
        <div class="but3" @click="close()">确定</div>
      </div>
    </div>
    <div class="zong" v-if="ee">
      <ul>
        <li class="active">综合</li>
        <li @click="ff('up')">价格从低到高</li>
        <li @click="ff('down')">价格从高到底</li>
      </ul>
    </div>
  </section>

</template>

<script>
import axios from 'axios'
export default {
  name: "Screen",
  props: [],
  mounted() {
    this.param='';
    this.price1='';
    this.price2='';
    this.cid=0;
    this.axios()
  },
  data() {
    return {
      kwords:this.$route.query.kwords,
      show: false,
      ww: true,
      qq: true,
      ee: false,
      arr:[],
      cid:null,
      title:null,
      aAttrs:null,
      otype:'all',
      total:null,
      Show:-1,
      follow:-1,
      Pin:-1,
      ClassifiedTitle:null,
      ClassifiedPrice:null,
      data:[
        {price:"0-50"},
        {price:"50-99"},
        {price:"100-300"},
        {price:"300-1000"},
        {price:"1000-4000"},
        {price:"4000-9999"}
      ],
      pp:true
    };
  },
  created(){
    // console.log(this.kwords)
    axios.get('http://vueshop.glbuys.com/api/home/goods/search?kwords=%E8%BF%9E%E8%A1%A3%E8%A3%99&param=[949,956]&page=1&price1=100&price2=200&otype=all&cid=496&token=1ec949a15fb709370f').then(res=>{
      this.arr=res.data.data
      this.cid=res.data.data[0].cid
      // console.log(this.cid)
    })
    //分类
    axios.get('http://vueshop.glbuys.com/api/home/category/menu?token=1ec949a15fb709370f').then(res=>{
      this.title=res.data.data
      // console.log(this.title)
    })
    //品牌
    axios.get('http://Vueshop.glbuys.com/api/home/goods/param?kwords='+this.kwords+'&token=1ec949a15fb709370f').then(res=>{
      this.aAttrs=res.data.data
      // console.log(this.aAttrs)
    })
  
},
methods:{
    close() {
      this.show = false;
    },
    aa() {
      this.show = true;
    },
    bb() {
      this.ww = !this.ww;
    },
    cc() {
      this.qq = !this.qq;
    },
    dd() {
      this.ee = !this.ee;
    },
    ff(otype='',cid='',price1='',price2='',param='') {
      this.otype=otype;
      this.cid=cid;
      this.price1=price1;
      this.price2=price2;
      this.param=param;
      this.ee = false;
      this.axios()
    },
    back() {
      this.$router.back(-1);
    },
    axios(){
      axios.get('http://vueshop.glbuys.com/api/home/goods/search?kwords='+this.kwords+'&param='+this.param+'&page=1&price1='+this.price1+'&price2='+this.price2+'&otype='+this.otype+'&cid='+this.cid+'&token=1ec949a15fb709370f').then(res=>{
        this.arr=res.data.data
        this.total=res.data.pageinfo.total
        console.log(this.total)
      })
    },
    Title(index){
      this.Show=index
      this.ClassifiedTitle=this.title[index].title
      console.log(this.ClassifiedTitle)
    },
    price(index){
      this.follow=index
      this.ClassifiedPrice=this.data[index].price
      this.pp=false
    },
    pin(index){
      this.Pin=index
      // this.ClassifiedTitle=this.title[index].title
      console.log(this.ClassifiedTitle)
    }
  }
  }
</script>

<style scoped>
.as{
  background: #ff9b00;
  color: white;
  float: left;
  width: 31%;
  text-align: center;
  border-radius: 3px;
  margin-bottom: 2%;
  margin-left: 1%;
  margin-right: 1%;
  height: 0.64rem;
  line-height: 0.64rem;
  font-size: 0.28rem;
}
.active{
  color: #ff9b00;
}
#ClassifiedTitle{
  font-size: 0.24rem;
  margin-left: 3.5rem;
  color: #ff9b00;
}
.screen-vue {
  width: 100%;
  height: 100%;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.header {
  height: 1.55rem;
  border-bottom: 0.04rem solid #f9f9f9;
  background: #fff;
}
.header .search {
  height: 0.78rem;
  background: #fff;
  border-bottom: 0.05rem solid #f9f9f9;
  display: flex;
  flex-direction: row;
}
.header .search .search_left {
  width: 0.9rem;
  background: url("../assets/main_img/screen_back.png") no-repeat center center;
  background-size: 90%;
}
.header .search .search_center {
  flex: 1;
}
.header .search .search_center .searchs {
  height: 0.6rem;
  background: #eaeaea;
  margin-top: 0.08rem;
  border-radius: 3px;
}
.header .search .search_center .searchs .s1 {
  display: inline-block;
  width: 0.64rem;
  height: 0.6rem;
  background: url("../assets/main_img/screen_search.png") no-repeat center
    center;
  background-size: 60%;
}
.header .search .search_center .searchs input {
  width: 67.5%;
  height: 0.565rem;
  position: absolute;
  top: 0.09rem;
  outline: none;
  border: none;
  background: #eaeaea;
}
.header .search .search_right {
  width: 0.86rem;
  line-height: 0.78rem;
  font-size: 0.33rem;
  text-align: center;
}
.header .list ul li {
  float: left;
  width: 1.4rem;
  line-height: 0.74rem;
  font-size: 0.31rem;
}
.header .list ul li:first-child {
  margin-left: 0.4rem;
  background: url("../assets/main_img/screen_down.png") no-repeat 0.7rem 0.15rem;
  background-size: 0.35rem;
}
.content {
  flex: 1;
  overflow: scroll;
}
.content .goods {
  height: 2.06rem;
  padding-top: 0.34rem;
  /* background: salmon; */
  display: flex;
  flex-direction: row;
}
.content .goods .goods_left {
  width: 2.2rem;
  text-align: center;
}
.content .goods .goods_left img {
  width: 2rem;
}
.content .goods .goods_right {
  flex: 1;
  border-bottom: 1px solid #ccc;
}
.content .goods .goods_right .goods_title {
  font-size: 0.26rem;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  color: #323232;
}
.content .goods .goods_right .goods_price {
  font-size: 0.26rem;
  color: #f93036;
  margin-top: 0.24rem;
}
.content .goods .goods_right .goods_num {
  margin-top: 0.2rem;
  color: #969696;
}
.content .goods .goods_right .goods_num span {
  color: #ff9b00;
}
.screen {
  background: #fff;
  width: 6.36rem;
  height: 100%;
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  display: flex;
  flex-direction: column;
  z-index: 12;
}
.screen .fen {
  border-bottom: #efefef solid 1px;
}
.screen .fen .fen_title {
  height: 0.8rem;
  background: #fff;
  display: flex;
  flex-direction: row;
  line-height: 0.8rem;
}
.screen .fen .fen_title span {
  font-size: 0.32rem;
  flex: 1;
  margin-left: 0.12rem;
}
.screen .fen .fen_title img {
  width: 0.4rem;
  height: 0.2rem;
  margin-top: 0.25rem;
  margin-right: 0.2rem;
}
.Show {
  float: left;
  width: 31%;
  text-align: center;
  border-radius: 3px;
  background: #efefef;
  margin-bottom: 2%;
  margin-left: 1%;
  margin-right: 1%;
  height: 0.64rem;
  line-height: 0.64rem;
  font-size: 0.28rem;
}
.screen .price {
  border-bottom: #efefef solid 0.26rem;
}
.screen .price .price_title {
  height: 0.8rem;
  background: #fff;
  display: flex;
  flex-direction: row;
  line-height: 0.8rem;
}
.screen .price .price_title span {
  font-size: 0.32rem;
  flex: 1;
  margin-left: 0.12rem;
}
.screen .price .price_r span {
  border: #efefef solid 1px;
  width: 0.93rem;
  height: 0.4rem;
  border-radius: 2px;
  font-size: 0.28rem;
  color: #757575;
}
.screen .price .price_r .ll{
  color: #efefef;
  border: none;
}
.screen .price .price_title img {
  width: 0.4rem;
  height: 0.2rem;
  margin-top: 0.25rem;
  margin-right: 0.2rem;
}
.screen .pin {
  border-bottom: #efefef solid 1px;
}
.screen .pin .pin_title {
  height: 0.8rem;
  background: #fff;
  display: flex;
  flex-direction: row;
  line-height: 0.8rem;
}
.screen .pin .pin_title span {
  font-size: 0.32rem;
  flex: 1;
  margin-left: 0.12rem;
}
.screen .pin .pin_title img {
  width: 0.4rem;
  height: 0.2rem;
  margin-top: 0.25rem;
  margin-right: 0.2rem;
}
.screen .pin .pin_con ul li {
  /* float: left;
  width: 31%;
  text-align: center;
  border-radius: 3px;
  background: #efefef;
  margin-bottom: 2%;
  margin-left: 1%;
  margin-right: 1%;
  height: 0.64rem;
  line-height: 0.64rem;
  font-size: 0.28rem; */
}
.screen .yi {
  border-bottom: #efefef solid 1px;
}
.screen .yi .yi_title {
  height: 0.8rem;
  background: #fff;
  display: flex;
  flex-direction: row;
  line-height: 0.8rem;
}
.screen .yi .yi_title span {
  font-size: 0.32rem;
  flex: 1;
  margin-left: 0.12rem;
}
.screen .yi .yi_title img {
  width: 0.4rem;
  height: 0.2rem;
  margin-top: 0.25rem;
  margin-right: 0.2rem;
}
.screen .yi .yi_con ul li {
  float: left;
  width: 31%;
  text-align: center;
  border-radius: 3px;
  background: #efefef;
  margin-bottom: 2%;
  margin-left: 1%;
  margin-right: 1%;
  height: 0.64rem;
  line-height: 0.64rem;
  font-size: 0.28rem;
}
.ss1 {
  flex: 1;
  overflow: scroll;
}
.ss2 {
  height: 1rem;
  background: #fff;
}
.ss2 div {
  width: 32.59%;
  line-height: 1rem;
  font-size: 0.28rem;
  text-align: center;
  display: inline-block;
  color: #323232;
}
.but1 {
  background: #fff;
}
.but1 span {
  color: #fda207;
}
.but2 {
  background: #efefef;
}
.but3 {
  background: #fda208;
  color: #fff !important;
}
.zong {
  position: absolute;
  height: 2.4rem;
  width: 100%;
  background: #fff;
  top: 1.5rem;
}
.zong ul li {
  border-bottom: #efefef solid 1px;
  height: 0.77rem;
  line-height: 0.77rem;
  padding-left: 0.22rem;
  color: #323232;
  font-size: 0.28rem;
}
.zong ul li:first-child {
  color: #fda208;
}
.screenBg{
  position: absolute;
  z-index:-1;
  width:100%;
  height:100%;
  background-color:rgba(0,0,0,0.3);
  left:0px;
  top:0px;
  opacity:0;
}
</style>
